<template>
  <div>
    <div class="top">
        <div class="photo">
            <img src="https://hnid-drcn.cloud.hihonor.com/CAS/up/idmw_rss_68/css/mobile/images/ic_honor_logo.png" alt="">
        </div>
        <div class="title">荣耀账号</div>
    </div>

    <div class="myinput">
        <div class="box">
            账号：<input type="text" placeholder="手机号/邮件地址/账号名">
        </div>
        <div class="box1">
            密码：<input type="text" placeholder="输入密码">
            <div class="tubiao">
                <img src="https://hnid-drcn.cloud.hihonor.com/CAS/up/idmw_rss_68/css/mobile/images/eyeon_wap_ui9.png?cas20210905" alt="">
            </div>
        </div>
    </div>

    <div class="news">
        <div>短信验证码登录</div>
        <div>忘记密码</div>
    </div>

    <div class="deng">
         <button>登录</button>
    </div>

    <div class="di">
        <div class="wen">遇到问题</div>
        <div class="san">三方账号登录</div>
        <div class="shang"><img src="https://hnid-drcn.cloud.hihonor.com/CAS/up/idmw_rss_68/logos/login_ic_HW.svg" alt=""></div>
    </div>
   
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
    .top{
        height: 6.25rem;
        margin-top: 1.25rem;
    }
    .photo{
        width: 3rem;
        height: 3rem;
        text-align: center;
        margin: 0 auto;
    }
    img{
        width: 100%;
    }
    .title{
        width: 6rem;
        margin: .625rem auto;
        font-size: 1.5rem;
        font-weight: 700;
    }
    .myinput{
        width: 20.5rem;
        margin: 0 auto;
        margin-top: 1.25rem;
        font-size: .875rem;
    }
    .box,.box1{
        border-bottom: 1px solid gray;
        margin-top: 1.125rem;
    }
    .box1{
        display: flex;
        line-height: 2.375rem;
    }
    input{
        margin-left: .3125rem;
        width: 14.375rem;
        height: 2.25rem;
        border: none;
        /* border-bottom: 1px solid gray; */
    }
    .tubiao{
        margin-left: 1.25rem;
        width: 1.5rem;
        height: 1.5rem;
        /* background-color: pink; */
    }
    .news{
        width: 20.5rem;
        margin: 0 auto;
        margin-top: 1.25rem;
        font-size: .875rem;
        color: blue;
        font-weight: 700;
        display: flex;
        justify-content: space-between;
    }
    .deng{
        width: 20.5rem;
        margin: 1.25rem auto;
    }
    button{
        width: 20.5rem;
        height: 2.25rem;
        border-radius: 1.5625rem;
        border: none;
        background-color: rgb(84, 150, 231);
        color: white;
    }
    .di{
        width: 6.25rem;
        height: 6.25rem;
        margin: 0 auto;
        margin-top: 12.5rem;
        /* background-color: pink; */
    }
    .wen{
        color: blue;
        font-size: .875rem;
        width: 3.75rem;
        margin: .3125rem auto;
    }
    .san{
        width: 5.3125rem;
        font-size: .875rem;
        margin: .625rem auto;
        color: gray;
    }
    .shang{
        width: 2.5rem;
        height: 2.5rem;
        margin: 0 auto;
    }
</style>